<template>
  <div class="content">
    <van-nav-bar
      @click-left="goBack"
      left-arrow
      title="管理端使用说明"
      fixed
    ></van-nav-bar>
    <main>
      <h3>管理端访问地址：</h3>
      <div class="title">
        <div class="left">
          <img src="../../assets/images/mine/link.png" alt="" />
          <span>http://wx-001.unionnetwork.com/wxweb</span>
        </div>
        <div
          class="right copy"
          data-clipboard-text="http://wx-001.unionnetwork.com/wxweb"
          @click="copyLink"
        >
          复制
        </div>
      </div>
      <p>
        使用电脑浏览器访问该地址进入优联互通文章资源库；使用注册账号、密码登录后即可进行相关配
        置。
      </p>
      <img src="../../assets/login_bg.png" alt="" />
      <h3>H5端访问地址：</h3>
      <div class="title">
        <div class="left">
          <img src="../../assets/images/mine/link.png" alt="" />
          <span>{{ h5 }}</span>
        </div>
        <div class="right" @click="look">访问</div>
      </div>
      <p>
        1.点击【访问】即可使用企业版，对文章、视频、海报、招聘和
        活动等资源进行推广、发布等更多功能期待您体验。
      </p>
      <p>
        2.<a :href="h5">{{ h5 }}</a
        >，该链接地址可整合在微信 公众号中。
      </p>
    </main>
  </div>
</template>
<script>
// 引入复制功能
import ClipboardJS from "clipboard";
export default {
  data() {
    return {
      h5: "",
      wxUserInfo: {},
    };
  },
  created() {
    document.querySelector("html").style.backgroundColor = "#fff";
    document.querySelector("body").style.backgroundColor = "#fff";
  },
  async mounted() {
    await this.$store.dispatch("updateUserInfo");
    this.h5 = this.$store.state.userInfo.linkAddress;
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));
  },
  methods: {
    //获取客户ID
    async getIndexPersonalInfo() {
      let obj = {
        account: sessionStorage.getItem("agentId"),
        weChatNo: "",
        name: this.wxUserInfo.nickname,
        image: this.wxUserInfo.headimgurl,
        openId: this.wxUserInfo.openid,
        gender: this.wxUserInfo.sex,
        city: this.wxUserInfo.city,
        province: this.wxUserInfo.province,
      };
      let res = await this.$api.getIndexPersonalInfo(obj);
      if (res.code != 0) return this.$toast(res.msg);
      sessionStorage.setItem("agentIds", res.data.id);
    },
    //获取account
    getAccount() {
      let index = this.h5.indexOf("=");
      let account = this.h5.slice(index + 1);
      sessionStorage.setItem("agentId", account);
    },
    //去访问
    async look() {
      await this.getAccount();
      await this.getIndexPersonalInfo();
      // 获取个人信息
      await this.$store.dispatch("updateUserInfo");
      this.$router.go(-1);
      setTimeout((_) => {
        this.$router.go(0);
      }, 800);
    },
    goBack() {
      this.$router.go(-2);
    },
    //点击复制链接
    copyLink() {
      let clipboard = new ClipboardJS(".copy");
      clipboard.on("success", (e) => {
        this.$toast("复制成功");
      });
      clipboard.on("error", (e) => {
        this.$toast("复制失败,请手动长按复制");
      });
    },
  },
};
</script>
<style lang="less" scoped>
main {
  padding: 46px 15px 0;
  h3 {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin: 22px 0 11px;
  }
  .title {
    background-color: #f6f4f5;
    border-radius: 5px;
    width: 345px;
    height: 34px;
    display: flex;
    align-items: center;
    .left {
      height: 34px;
      display: flex;
      align-items: center;
      flex: 1;
      font-size: 11px;
      color: #666666;
      img {
        width: 20px;
        height: 20px;
        margin: 0 15px 0 14px;
      }
      span {
        display: inline-block;
        width: 245px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .right {
      width: 50px;
      background-color: #4988fd;
      border-radius: 0px 5px 5px 0px;
      color: #fff;
      height: 100%;
      line-height: 34px;
      text-align: center;
      font-size: 12px;
    }
  }
  p {
    margin-top: 15px;
    font-size: 12px;
    line-height: 24px;
    color: #6c6c6c;
    a {
      color: #5873f6;
    }
    &:last-of-type {
      margin-top: 0;
    }
  }
  img {
    width: 100%;
    height: 170px;
    margin-top: 17px;
  }
}
</style>
